<template>
	<view class="set-spec">
		<view class="spec-item" v-for="(item, index) in specList" :key="item">
			<view class="spec-title">
				<view class="spec-name"> {{item.spece_value_title}} </view>
				<!-- <view class="spec-btn">
					<view class="min-box" @tap="delSpec(index)">
						<image class="img" src="/static/icon/shop/min.png" />
						<text> 删除 </text>
					</view>
				</view> -->
			</view>
			<view class="spec-info">
				<view class="item">
					<view class="label"> 规格名称 </view>
					<view class="value">
						<input disabled v-model="item.spece_value_title" type="text" placeholder="请输入规格名称" placeholder-class="placeCss" />
					</view>
				</view>
				<!-- <view class="item">
					<view class="label"> 市场价 </view>
					<view class="value">
						<input v-model="item.original_price" type="text" placeholder="请输入市场价格" placeholder-class="placeCss" />
					</view>
				</view> -->
				<view class="item">
					<view class="label"> 销售价 </view>
					<view class="value">
						<input v-model="item.price" type="text" placeholder="请输入销售价格" placeholder-class="placeCss" />
					</view>
				</view>
				<!-- <view class="item">
					<view class="label"> 每日库存 </view>
					<view class="value">
						<input v-model="item.stock_day" type="text" placeholder="请输入每日库存量" placeholder-class="placeCss" />
					</view>
				</view> -->
				<view class="item">
					<view class="label"> 总库存 </view>
					<view class="value">
						<input v-model="item.stock" type="text" placeholder="请输入商品总库存数量" placeholder-class="placeCss" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import ChooseBtn from '@/components/ChooseBtn.vue';
	import { isNull, isMobile } from '@/utils/valdate.js'
	import { GetSpecInfoApi, uploadImgApi } from '@/service/shop.js'
	const props = defineProps(['specList'])
	const speceArr = ref([])
	const chooseImg = (i) => {
		uni.chooseImage({
			count: 1,
			success: (res) => {
				uploadImgApi(res.tempFilePaths[0]).then(res => {
					speceArr.value[i].thumb = res.id
					speceArr.value[i].thumb_url = res.path
				})
			}
		})
	}
	const delImg = (i) => {
		speceArr.value[i].thumb = ''
		speceArr.value[i].thumb_url = ''
	}
	const delSpec = (i) => {
		speceArr.value.splice(i, 1)
	}
	defineExpose({
		speceArr
	})
</script>

<style lang="scss" scoped>
	.set-spec {
		.img {
			width: 16px;
			height: 16px;
			margin-right: 4px;
		}
		.title {
			display: flex;
			margin-top: 15px;
			align-items: center;
			justify-content: space-between;
			.text {
				color: #333333;
				font-size: 14px;
				font-weight: 500;
			}
			.add {
				color: #008FF4;
				font-size: 14px;
				font-weight: 400;
				display: flex;
				align-items: center;
			}
		}
		.title-inp {
			padding: 0 12px;
			margin-top: 10px;
			border-radius: 10px;
			background-color: #fff;
		}
		.uni-forms-item {
			margin-bottom: 0;
			align-items: center;
			height: 50px;
			.item {
				border-bottom: 1px solid #eeeeee;
				height: 50px;
				display: flex;
				align-items: center;
				box-sizing: border-box;
				&:nth-last-of-type(1) {
					border-bottom: none;
				}
				.label {
					color: #333333;
					font-size: 16px;
					font-weight: 400;
					margin-right: 10px;
				}
				.value {
					flex: 1;
					display: flex;
					margin-left: 10px;
					padding-right: 10px;
					align-items: center;
					justify-content: end;
					.text {
						color: #D8D8D8;
						font-size: 14px;
						font-weight: 400;
						&.a-text {
							color: #333333;
						}
					}
					.right {
						width: 14px;
						height: 14px;
						margin-left: 5px;
					}
				}
				.easy-input {
					flex: 1;
					color: #D8D8D8;
					font-size: 14px;
					font-weight: 400;
					text-align: right;
					margin-left: 10px;
				}
			}
		}
		:deep(.uni-forms-item__error) {
			left: 0;
			top: 100%;
			right: 12px;
			font-size: 12px;
			text-align: right;
			padding-bottom: 3px;
			transform: translateY(-100%);
		}
		.spec-item {
			margin-top: 15px;
			.spec-title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 10px;
				.spec-name {
					color: #333333;
					font-size: 14px;
					font-weight: 500;
					line-height: 16px;
				}
				.spec-btn {
					.add-box, .min-box {
						display: flex;
						align-items: center;
						text {
							color: #008FF4;
							font-size: 14px;
							font-weight: 400;
							line-height: 16px;
						}
					}
					.min-box {
						text {
							color: #FF3B1E;
						}
					}
				}
			}
			.spec-info {
				padding: 0 12px;
				border-radius: 10px;
				background-color: #fff;
				.item {
					height: 50px;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1px solid #EEEEEE;
					box-sizing: border-box;
					&:nth-last-of-type(1) {
						border-bottom: none;
					}
					.label {
						font-weight: 400;
						font-size: 16px;
						color: #333333;
						line-height: 20px;
					}
					.value {
						input {
							color: #333333;
							font-size: 14px;
							font-weight: 400;
							line-height: 20px;
							text-align: right;
						}
						.placeCss {
							color: #D8D8D8;
							font-size: 14px;
							font-weight: 400;
						}
					}
				}
			}
		}
	}
</style>